<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.banner{
			width: 670px;
			height: 280px;
			background: url(../../小黑子/a1.jpg);
			margin: 0px auto;
			position: relative;
		}
		.icon{
			position: absolute;
			right: 10px;
			bottom:10px;
			width: 130px;
			height: 30px;
/*			background: orange;*/
		}
		.icon span{
			float: left;
			width: 30px;
			height: 30px;
			border-radius:50% ;
			background: rgba(0, 0, 0, 0.3);
			margin-left: 10px;
			line-height: 30px;
			text-align: center;
			color: #fff;
			cursor: pointer;

		}
	</style>
</head>
<body>
	<div class="banner">
		<div class="icon">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		</div>
	</div>
	<script type="text/javascript">
	 var spans = document.querySelectorAll("span")
	 var banner = document.querySelector(".banner")
		for (var i = 0; i <spans.length; i++) {
			spans[i].onclick=function(){
				// console.log(this.innerText) 当前点击的值
				let num = this.innerText
				banner.style.backgroundImage='url(../../小黑子/a' + num + '.jpg)'
			}
		}
	</script>
</body>
</html>